<template>
  <div class="dialog-setting">
    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">
        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">字段标识</div>
          </el-col>
          <el-col :span="18">
               <select-model :model.sync="store.current.model" ></select-model>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">字段标题</div>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="store.current.options.name"
              placeholder="label"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">选择表单</div>
          </el-col>
          <el-col :span="18">
            <el-input
              @click.native="selectForm"
              v-model="store.current.options.formDataName"
              placeholder="选择表单"
              readonly
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">操作按钮</div>
          </el-col>
          <el-col :span="18">
            <i
              @click="addHandles"
              class="el-icon-circle-plus-outline addForeignKey"
            ></i>
          </el-col>
        </el-row>

        <div class="handle-wrap">
          <el-card
            class="box-card"
            v-for="(handle, index) in store.current.handles"
            :key="'handles' + index"
          >
            <div slot="header" class="clearfix">
              <i
                @click="removeBtn(store.current.handles, index)"
                class="el-icon-delete"
              ></i>
            </div>
            <el-row type="flex" align="middle">
              <el-col :span="24">
                <div class="prop-set-title">
                  <el-input
                    v-model="handle['name']"
                    placeholder="name"
                  ></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle">
              <el-col :span="24">
                <div class="prop-set-title">
                  <el-select
                    clearable
                    v-model="handle['type']"
                    placeholder="请选择按钮类型"
                  >
                    <el-option
                      v-for="item in btnTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle">
              <el-col :span="24">
                <div class="prop-set-title">
                  <el-select
                    v-model="handle['eventCode']"
                    placeholder="请选择事件名称"
                    clearable
                  >
                    <el-option
                      v-for="trigger in store.eventCollection"
                      :key="trigger.value"
                      :label="trigger.label"
                      :value="trigger.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
         
      </el-tab-pane>
      <el-tab-pane label="表单属性" name="second">
        <form-config :store="store"></form-config>
      </el-tab-pane>
    </el-tabs>

    <!-- 选择表单 -->
    <el-dialog
      title="选择表单"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="selectFormVisible"
      width="70%"
    >
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="formName" label="表单名称"> </el-table-column>
          <el-table-column prop="formCode" label="表单编码"> </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="quote(scope.row)"
                >引用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectFormVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import formConfig from "@/low-code/setting/form-config/index.vue";
import { Store } from "@/low-code/utils/store.js";
import clone from "clone";
export default {
  inject: ["getStore"],
  components: { formConfig },
  data() {
    return {
      active: "first",
      selectFormVisible: false,
      tableData: [],
      btnTypes: [
        {
          label: "主要按钮",
          value: "primary",
        },
        {
          label: "成功按钮",
          value: "success",
        },
        {
          label: "信息按钮",
          value: "info",
        },
        {
          label: "警告按钮",
          value: "warning",
        },
        {
          label: "危险按钮",
          value: "danger",
        },
        {
          label: "默认按钮",
          value: "",
        },
      ],
    };
  },
  computed: {
    store() {
      return this.getStore();
    },
  },
  watch: {
    "store.current.options": {
      handler() {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.$handleStack.push(clone(this.store.root));
      },
      // immediate: true,  //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  methods: {
    addHandles() {
      this.store.current.handles.push({
        name: "",
        eventCode: "",
      });
    },
    removeBtn(handles, index) {
      handles.splice(index, 1);
    },
    getFormList() {
      Store.axios({
        method: "get",
        url: Store.prefixUrl + "/formTemplateList",
      }).then((result) => {
        console.log("result", result);
        this.tableData = result.data.data;
      });
    },
    selectForm() {
      this.selectFormVisible = true;
    },
    quote(row) {
      this.store.current.options.defaultValue = row.id;
      this.store.current.options.formDataName = row.formName;
      this.selectFormVisible = false;
    },
  },
  mounted() {
    this.getFormList();
  },
};
</script>

<style scoped>
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
>>> .el-card__header {
  padding: 5px !important;
}

.el-icon-delete {
  cursor: pointer;
  float: right;
  padding: 3px 0;
  color: red;
}

.handle-wrap {
  padding: 0 10px;
}

.box-card {
  margin-bottom: 10px;
}
</style>
